<template>
    <div class="zh-change-log">
        <nav-header>
			<template slot="menuBefore">
				<li><router-link to="/affairs/teachers/record-manage" tag="a">档案管理</router-link></li>
				<li class="gap">&gt;</li>
			</template>
			<li class="gap">变更记录</li>
		</nav-header>
        <div class="zh-table">
            <div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <div class="open-width userName">
                        {{$route.query.teacherName}}
                        <span>
                            ({{$route.query.teacherAccount}})
                        </span>
                    </div>
                </div>
                <div class="zh-open-left fr">
                    <el-button type="primary" @click="exportExcel">导出所选</el-button>
                    <el-button type="danger" @click="deleteAllList">批量删除</el-button>
                </div>
            </div>
            <div class="zh-table-contents"
                v-loading="loading.status" 
                :element-loading-text="loading.txt">
                <el-table
				    :data="listData"
				    border
                    :row-key="getRowKeys"
				    max-height="600"
					@selection-change="handleSelectionChange"
				    style="width: 100%">
				    <el-table-column
				      type="selection"
                      :reserve-selection="true"
				      align="center"
				      width="50"
				      >
				    </el-table-column>
                    <el-table-column
				      prop="create_user_name"
				      label="操作员"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
                    <el-table-column
				      prop="message"
				      label="操作记录"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
                    <el-table-column
				      prop="create_time"
				      label="操作时间"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
                    <el-table-column
				      prop=""
				      label="操作"
				      align="center"
				      show-overflow-tooltip
				      >
                      <template slot-scope="scope">
                          <el-button type="text" @click="changeDetail(scope.row)">详情</el-button>
                          <el-button type="text" class="delete-button" @click="deleteLog(scope.row)">删除</el-button>
                      </template>
				    </el-table-column>
                </el-table>
                <div class="table-pagination" v-show="total_number > 10">
					<el-pagination
					    @size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="listParam.page_index"
					    :page-sizes="[10, 20, 30, 40, 50, 100]"
					    :page-size="listParam.page_size"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total_number">
					</el-pagination>
				</div>
            </div>
        </div>

        <el-dialog
            title="变更详情"
            :visible.sync="changeInfoFlag"
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
            width="900px">
            <div class="hforetitle">变更前</div>
            <ul class="teacherInfoBox">
                <li v-for="item in changeLogDetail.content_before" :key="item.field_id">
                    <p :title="item.field_name">{{item.field_name}}</p>
                    <div :title="item.value" v-if="item.value">{{item.value}}</div>
                    <div v-else>--</div>
                </li>
            </ul>
            <hr />
            <div class="hforetitle">变更后</div>
            <ul class="teacherInfoBox">
                <li v-for="item in changeLogDetail.content_after" :key="item.field_id">
                    <p :title="item.field_name">{{item.field_name}}</p>
                    <div :title="item.value" v-if="item.value" :class="{blueColor:addClass(item.field_id)}">{{item.value}}</div>
                    <div v-else>--</div>
                </li>
            </ul>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loading:{
                    status:false,
                    txt:'获取数据...'
                },
                listData: [],
                listParam: {
                    user_id: this.$route.params.id,
                    page_index: 1,
                    page_size: 10,
                },
                total_number: 0,
                changeInfoFlag: false,
                selectData: [],
                changeLogDetail: {},
            }
        },
        created() {
            this.getArchivelog()
        },
        methods: {
            // 被修改项颜色
            addClass(val){
                return this.changeLogDetail.change_field_id.includes(val.toString())
            },
            getArchivelog() {
                const success = res => {
                    this.listData = res.data.data
                    this.total_number = res.data.data_sum
                }
                this.$ajax.get('/api/newarchive/archive_log_list', { params: this.listParam, func: {success}})
            },
            handleSelectionChange(val) {
                this.selectData = val
            },
            getRowKeys(row) {
                return row.id;
            },
            handleSizeChange(val) {
                this.listParam.page_index = 1
                this.listParam.page_size = val
                this.getArchivelog()
            },
            handleCurrentChange(val) {
                this.listParam.page_index = val
                this.getArchivelog()
            },
            changeDetail(val) {
                this.changeInfoFlag = true
                const success = res => {
                    this.changeLogDetail = res.data
                    // console.log(res.data)
                }
                this.$ajax.get('/api/newarchive/archive_log', {params: {log_id: val.id},func: {success}})
            },
            exportExcel() {
                if(this.selectData.length == 0) return this.$message.warning('请选择需要导出的变更记录')
                let params = {
                        user_id: this.$route.params.id,
                }
                if(this.total_number != this.selectData.length) {
                    let arr = []
                    for(let i = 0; i < this.selectData.length; i++) {
                        arr.push(this.selectData[i].id)
                    }
                    params = {
                        user_id: this.$route.params.id,
                        log_id: arr
                    }
                }
                this.export_excel('/api/newarchive/archive_log_export', params, `${this.$route.query.teacherName}档案变更记录`);
            },
            deleteAllList() {
                if(this.selectData.length == 0) return this.$message.warning('请选择需要删除的变更记录')
                let yes = ( data => {
                    let arr = []
                    for(let i = 0; i<this.selectData.length; i++) {
                        arr.push(this.selectData[i].id)
                    }
                    this.dellogInfo(arr)
                })
                let cancel = ( data => {})
                this.e_confirm({yes:yes,cancel:cancel,txt: `是否删除被选中的变更记录？`});
            },
            deleteLog(val) {
                let yes = ( data => {
                    this.dellogInfo(val.id)
                })
                let cancel = ( data => {})
                this.e_confirm({yes:yes,cancel:cancel,txt: `是否删除该条变更记录？`});
            },
            dellogInfo(arr) {
                const success = res => {
                    this.getArchivelog()
                }
                let params = {
                    log_id: arr,
                }
                this.$ajax.delete('/api/newarchive/archive_log', {params, func: {success}})
            }
        },
    }
</script>

<style lang="scss">
    .zh-change-log {
        .userName {
            width:240px; 
            font-size: 20px;
            span {
                font-size: 14px;
                color: #999;
            }
        }
        .hforetitle {
            text-align: center;
            font-size: 20px;
            font-weight: 700;
        }
        .teacherInfoBox {
            height: 290px;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            >li {
                width: 33.3%;
                font-size: 14px;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                >p {
                    width: 30%;
                    text-align: left;
                    white-space:nowrap; 
                    overflow:hidden; 
                    text-overflow:ellipsis;
                    color: #555555;
                }
                >div {
                    color: #000;
                    width: 70%;
                    text-align: left;
                    white-space:nowrap; 
                    overflow:hidden; 
                    text-overflow:ellipsis;
                }
                .blueColor {
                    color: #409EFF;
                }
            }
        }
    }
</style>
